<template>
	<view class="yb-flex yb-flex-1" :id="customIdSync" :class="customClassSync" :style="customStyleSync">
		<yb-list
		ref="list"
		:loading="loading"
		:empty="empty"
		:scrollable="scrollable"
		:enableScrolling="enableScrolling"
		@scroll="onScroll"
		:pulldown="pulldown"
		:loadmore="loadmore"
		@pulldown="onPulldown"
		@loadmore="onLoadmore" type="scroll">
			<template v-slot:pulldown-symbol>
				<slot name="pulldown-symbol"></slot>
			</template>
			<template v-slot:pulldown-loading>
				<slot name="pulldown-loading"></slot>
			</template>
			<template v-slot:pulldown-success>
				<slot name="pulldown-success"></slot>
			</template>
			<template v-slot:pulldown-fail>
				<slot name="pulldown-fail"></slot>
			</template>
			<template v-slot:pulldown-end>
				<slot name="pulldown-end"></slot>
			</template>
			<template v-if="isShow">
				<yb-appear
				v-for="(grid, i) in list" :key="i"
				:style="{height: grid.child.length > 0 ? '' : grid.height ? grid.height + 'px' : (Util.unitpixel(perchHeight) * count) + 'px'}"
				target=".yb-pulldown-scroller"
				@appear="onAppear(i)">
					<view class="yb-flex" :class="'yb-virtual-list-item-content_' + i" ref="ybVirtualListItemContent">
						<view class="yb-flex" v-for="(item, index) in grid.child" :key="index">
							<slot :listItem="{
								index: parseInt(i * count) + parseInt(index),
								detail: item
							}"></slot>
						</view>
					</view>
				</yb-appear>
			</template>
			<template v-slot:loadmore-symbol>
				<slot name="loadmore-symbol"></slot>
			</template>
			<template v-slot:loadmore-loading>
				<slot name="loadmore-loading"></slot>
			</template>
			<template v-slot:loadmore-fail>
				<slot name="loadmore-fail"></slot>
			</template>
			<template v-slot:loadmore-end>
				<slot name="loadmore-end"></slot>
			</template>
		</yb-list>
		</view>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			loading: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			empty: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			pulldown: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			loadmore: {
				type: [Object,Boolean],
				default () {
					return new Object
				}
			},
			//允许滚动
			scrollable: {
				type: Boolean,
				default: true
			},
			//监听滚动事件
			enableScrolling: {
				type: Boolean,
				default: false
			},
			perchHeight: {
				type: [Number,String],
				default: 300
			},
			//每页数据量
			count: {
				type: Number,
				default: 10
			}
		},
		computed: {
			Util () {
				return Util
			}
		},
		data () {
			return {
				isShow: false,
				list: [],
				data: []
			}
		},
		methods: {
			init (data) {
				this.isShow = false
				this.$nextTick(function () {
					this.list = []
					this.$nextTick(function() {
						this.data = data
						for ( let i = 0; i < Math.ceil(data.length / this.count); i++ ) {
							this.list.push({
								height: 0,
								child: []
							})
						}
						this.isShow = true
					})
				})
			},
			unshift (data) {
				this.data = data.concat(this.data)
				let list = []
				for ( let i = 0; i < Math.ceil(data.length / this.count); i++ ) {
					list.push({
						height: 0,
						child: []
					})
				}
				this.list = list.concat(this.list)
			},
			insert (data) {
				this.data = this.data.concat(data)
				for ( let i = 0; i < Math.ceil(data.length / this.count); i++ ) {
					this.list.push({
						height: 0,
						child: []
					})
				}
			},
			remove (index) {
				this.data.splice(index, 1)
			},
			clear () {
				this.data = []
				this.list = []
			},
			onScroll (e) {
				this.$emit('scroll', e)
			},
			onAppear (i) {
				if ( i - 2 >= 0 && this.list[i-2].child.length > 0 ) {
					this.$set(this.list[i-2], 'child', [])
				}
				if ( i + 2 < this.list.length && this.list[i+2].child.length > 0 ) {
					this.$set(this.list[i+2], 'child', [])
				}
				for ( let j = i - 1; j < i + 2; j++ ) {
					if ( j >= 0 && j < this.list.length ) {
						if ( this.list[j].child.length < this.count ) {
							this.$set(this.list[j], 'child', Util.deepClone(this.data.slice(j * this.count, (j + 1) * this.count)))
						}
						this.$nextTick(() => {
							if ( !this.list[j].height ) {
								this.show(j)
							}
						})
					}
				}
			},
			show (i) {
				setTimeout(() => {
					Util.getRect('.yb-virtual-list-item-content_' + i, this.$refs.ybVirtualListItemContent[i], this).then(res => {
						this.list[i].height = res.height
					})
				}, 100)
			},
			onPulldown (callback) {
				this.$emit('pulldown', callback)
			},
			onLoadmore (callback) {
				this.$emit('loadmore', callback)
			},
			backTop () {
				this.$refs.list.backTop()
			}
		}
	}
</script>

<style>
</style>
